<%--
  Created by IntelliJ IDEA.
  User: vincent
  Date: 15-9-15
  Time: 下午1:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>加载闪烁点</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <style type="text/css">
        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

<style type="text/css">
    #map {
        width: 100%;
        height: 100%;
    }
</style>

<div id="map"></div>
<script type="text/javascript">
    var map = new BMap.Map("map", {});                        // 创建Map实例
    map.centerAndZoom(new BMap.Point(105.000, 38.000), 6);     // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom();                        //启用滚轮放大缩小



    if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点

        $.ajax({
            url:"${pageContext.request.contextPath}/main/log/getLocations.html",
            dataType:'json',
            success:function(data){
                var points = [];  // 添加海量点数据
                for (var i = 0; i < data.data.length; i++) {
                    points.push(new BMap.Point(data.data[i][0], data.data[i][1]));
                }
                var options = {
                    size: BMAP_POINT_SIZE_NORMAL,
                    shape: BMAP_POINT_SHAPE_RHOMBUS,
                    color: 'blue'
                }
                var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
                pointCollection.addEventListener('click', function (e) {
                    alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
                });
                map.addOverlay(pointCollection);  // 添加Overlay
            }
        });


    } else {
        alert('请在chrome、safari、IE8+以上浏览器查看本示例');
    }
</script>
</body>
</html>

